<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../css/common.css">
    <style>
        html,body,header,section,footer,nav,div,ul,ol,li,img,a,span,em,del,center,strong,var,fieldset,form,label,dt,dd,cite,input,hr,time,mark,code,figcaption,figure,textarea{
            margin:0;
            border:0;
            padding:0;
        }
        html,body {
            -webkit-touch-callout:none;
            -webkit-text-size-adjust:none;
            -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
            -webkit-user-select:none;
        }

        header,footer,section,nav,img,a,button,em,del,strong,var,fieldset,label,cite,small,time,mark,code,figcaption,figure,textarea{
            display:block;
        }
        header,section,footer,nav {
            position:relative;
            overflow:hidden;
        }
        ol,ul{
            list-style:none;
        }
        input,button,textarea {
            border:0;
            margin:0;
            padding:0;
            font-size:1em;
            line-height:1em;
            -webkit-appearance:none;
            background-color:rgba(0, 0, 0, 0);
        }
        span{
            display:inline-block;
        }
        a,a:visited{
            text-decoration:none;
        }

        #header {
            background-color:#40aa53;
        }
        #nav{
            display:-webkit-box;
            height:40px;
        }
        #left {
            width:80px;
            color:#fff;
            background:url(../image/navbtn_back.png) no-repeat 14px 12px;
            -webkit-background-size:12px 20px;
        }
        #left>span {
            margin-top:13px;
            margin-left:36px;
            font-size:18px;
            height:18px;
            line-height:18px;
        }
        #middle {
            -webkit-box-flex:1;
            width:100%;
            display:-webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align:center;
        }
        #title {
        	font-size: 20px; height: 44px; margin: 0em; color: #fff;
            line-height:40px;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            text-align: center;
        }
        #right {
            width:80px;
        }
        section {
            -webkit-box-flex:1;
        }
        
        
        
        

        #footer {
            width: 100%;
            text-align: center;
            height:44px;
            line-height: 43px;
            background-color: #ffffff;
            border-top: 1px solid #eaeaea;
        }

        ul {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }

        .prev {
            background-image: url(../image/prev.png);
        }
        .next {
            background-image: url(../image/next.png);
        }
       .refresh {
            background-image: url(../image/refresh.png);
        }

        #footer li {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            height: 43px;
        }

        .bottom_btn {
            background-position-y: 4px;
            font-size: 12px;
            color: #323237;
            width: 99%;
            height: 40px;
            background-repeat: no-repeat no-repeat;
            background-position-x: center;
            background-size: 30px;
            padding-top: 0;
        }
        
        .active .prev {
            background-image: url(../image/prev_pressed.png);
        }

        .active .next {
            background-image: url(../image/next_pressed.png);
        }
        
        .active .refresh {
            background-image: url(../image/refresh_pressed.png);
        }

        .active .bottom_btn {
            color: #6ab494;
            background-size: 30px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <header id='header'>
        <nav id="nav">
            <a id="left" onclick="closeWin();">
                <span>返回</span>
            </a>
            <div id="middle" onclick="gotop('frm_forum_list')">
                <div id="title"></div>
            </div>
            <a id="right">
            </a>
        </nav>
    </header>
    <div id="main">
    </div>
    
    <div id="footer">
        <ul>
        	<li id="page"></li>
            <li id="refresh" tapmode="active" onclick="refresh()">
            	<span class="bottom_btn refresh"></span>
            </li>
            <li id="prev" tapmode="active" onclick="prev()">
            	<span class="bottom_btn prev"></span>
            </li>

            <li id="next" tapmode="active" onclick="next()">
            	<span class="bottom_btn next"></span>
            </li>
            
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script>
    apiready = function() {
        var header = $api.byId('header');
        var winHeight = api.winHeight;
        var footer = $api.byId('footer');
        $api.fixIos7Bar(header);

	    var header_h = $api.offset(header).h;
	    var footer_h = $api.offset(footer).h;
	    var rect_h = winHeight - header_h - footer_h;
        
        var pageParam = api.pageParam;
        if(pageParam.fname){
        	$api.html($api.dom('#title'), pageParam.fname);
        }
        api.openFrame({
            name: 'frm_forum_list',
            url: 'frm_forum_list.html',
            rect:{
                x:0,
                y:header_h,
                w:'auto',
                h:rect_h
            },
            bounces: true,
            pageParam: {fid: pageParam.fid, fname: pageParam.fname}
        });

    }

    function closeWin(){
        api.closeWin();
    }
    
	function prev(){
		var nowPage = $api.getStorage('nowPage');
		var totalPages = $api.getStorage('totalPages');
		var prevPage = parseInt(nowPage) - 1;
		if(parseInt(prevPage)>=1){
			api.execScript({
			    frameName: 'frm_forum_list',
			    script: 'getList('+prevPage+', "prev");'
			});
		}else{
			api.toast({
			    msg: '已是第一頁',
			    duration:2000,
			    location: 'middle'
			});
		}
		
	}
	
	function next(){
		var nowPage = $api.getStorage('nowPage');
		var totalPages = $api.getStorage('totalPages');
		var nextPage = parseInt(nowPage) + 1;
		if(parseInt(nowPage) <= parseInt(totalPages)){
			api.execScript({
			    frameName: 'frm_forum_list',
			    script: 'getList('+nextPage+', "next");'
			});
		}else{
			api.toast({
			    msg: '已到最後一頁',
			    duration:2000,
			    location: 'middle'
			});
		}
	}
	
	function refresh(){
		var nowPage = $api.getStorage('nowPage');
			api.execScript({
			    frameName: 'frm_forum_list',
			    script: 'getList('+nowPage+', "refresh");'
			});
	}
	
	function setPage(page){
		$api.html($api.byId('page'), page + ' 頁');
	}
	

</script>
</html>